<template>
  <view class="header">
    <view>
      <text class="title">{{ title }}</text>
      <text v-if="des" class="des">{{ des }}</text>
    </view>
    <button v-if="editButtonText" class="edit-btn" type="none" @click="handelBtn">
      {{ editButtonText }}
    </button>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';

  defineProps({
    title: {
      type: String,
      required: true,
    },
    des: propTypes.string,
    editButtonText: propTypes.string,
  });

  const emit = defineEmits(['change']);

  function handelBtn() {
    emit('change');
  }
</script>

<style lang="scss" scoped>
  $headerHeight: 54rpx;
  .header {
    height: $headerHeight;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 27rpx;
    margin-bottom: 12rpx;
    .des {
      color: #808080;
      font-size: 23rpx;
      margin-left: 15rpx;
    }
    .edit-btn {
      width: 135rpx;
      height: $headerHeight;
      border-radius: 10rpx;
      background-color: #e9e3b5;
      line-height: $headerHeight;
      font-size: 23rpx;
      text-align: center;
    }
  }
</style>
